<template>
  <div class="bill-page">
    <!-- 页面标题 -->
    <div class="page-header">
      <div class="header-left">
        <h2>对账单</h2>
        <p class="subtitle">查看每月的收支明细和结算记录</p>
      </div>
      <div class="header-right">
        <a-button type="primary" @click="handleExport">
          <template #icon><icon-download /></template>
          导出对账单
        </a-button>
      </div>
    </div>

    <!-- 对账单列表 -->
    <a-card :bordered="false">
      <!-- 搜索表单 -->
      <a-form :model="searchForm" layout="inline" class="search-form">
        <a-form-item field="month" label="账单月份">
          <a-month-picker v-model="searchForm.month" style="width: 200px" />
        </a-form-item>
        <a-form-item field="status" label="结算状态">
          <a-select
            v-model="searchForm.status"
            placeholder="请选择状态"
            allow-clear
            style="width: 200px"
          >
            <a-option value="pending">待结算</a-option>
            <a-option value="settled">已结算</a-option>
          </a-select>
        </a-form-item>
        <a-form-item>
          <a-space>
            <a-button type="primary" @click="handleSearch">
              <template #icon><icon-search /></template>
              搜索
            </a-button>
            <a-button @click="handleReset">
              <template #icon><icon-refresh /></template>
              重置
            </a-button>
          </a-space>
        </a-form-item>
      </a-form>

      <!-- 对账单表格 -->
      <a-table
        :data="billList"
        :columns="columns"
        :pagination="pagination"
        @page-change="onPageChange"
      >
        <!-- 账单月份 -->
        <template #month="{ record }">
          <div class="month-info">
            <div class="month">{{ record.month }}</div>
            <div class="year">{{ record.year }}</div>
          </div>
        </template>

        <!-- 收支金额 -->
        <template #amount="{ record }">
          <div class="amount-info">
            <div class="income">
              <span class="label">收入：</span>
              <span class="value income">¥{{ record.income }}</span>
            </div>
            <div class="expense">
              <span class="label">支出：</span>
              <span class="value expense">¥{{ record.expense }}</span>
            </div>
          </div>
        </template>

        <!-- 结算金额 -->
        <template #settlement="{ record }">
          <span class="settlement-amount">¥{{ record.settlement }}</span>
        </template>

        <!-- 状态 -->
        <template #status="{ record }">
          <a-tag :color="getStatusColor(record.status)">
            {{ record.statusText }}
          </a-tag>
        </template>

        <!-- 操作 -->
        <template #operations="{ record }">
          <a-space>
            <a-button type="text" @click="handleViewDetail(record)">
              查看明细
            </a-button>
            <a-button type="text" @click="handleDownload(record)">
              下载账单
            </a-button>
          </a-space>
        </template>
      </a-table>
    </a-card>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
import { Message } from "@arco-design/web-vue";
import {
  IconDownload,
  IconSearch,
  IconRefresh,
} from "@arco-design/web-vue/es/icon";

// 搜索表单
const searchForm = reactive({
  month: null,
  status: null,
});

// 表格列配置
const columns = [
  {
    title: "账单月份",
    dataIndex: "month",
    slotName: "month",
  },
  {
    title: "收支金额",
    dataIndex: "amount",
    slotName: "amount",
  },
  {
    title: "结算金额",
    dataIndex: "settlement",
    slotName: "settlement",
  },
  {
    title: "结算状态",
    dataIndex: "status",
    slotName: "status",
  },
  {
    title: "操作",
    slotName: "operations",
  },
];

// 对账单列表
const billList = ref([
  {
    id: 1,
    year: "2024",
    month: "03月",
    income: "12345.67",
    expense: "2345.67",
    settlement: "10000.00",
    status: "pending",
    statusText: "待结算",
  },
  {
    id: 2,
    year: "2024",
    month: "02月",
    income: "23456.78",
    expense: "3456.78",
    settlement: "20000.00",
    status: "settled",
    statusText: "已结算",
  },
  {
    id: 3,
    year: "2024",
    month: "01月",
    income: "34567.89",
    expense: "4567.89",
    settlement: "30000.00",
    status: "settled",
    statusText: "已结算",
  },
]);

// 分页配置
const pagination = reactive({
  total: 100,
  current: 1,
  pageSize: 10,
  showTotal: true,
  showJumper: true,
});

// 获取状态颜色
const getStatusColor = (status) => {
  const colorMap = {
    settled: "green",
    pending: "orange",
  };
  return colorMap[status] || "default";
};

// 处理搜索
const handleSearch = () => {
  // TODO: 调用搜索API
  Message.success("搜索成功");
};

// 处理重置
const handleReset = () => {
  searchForm.month = null;
  searchForm.status = null;
};

// 处理分页
const onPageChange = (page) => {
  pagination.current = page;
  // TODO: 加载对应页数据
};

// 导出对账单
const handleExport = () => {
  Message.success("对账单导出中...");
};

// 查看明细
const handleViewDetail = (record) => {
  // TODO: 跳转到明细页面
  Message.info(`查看 ${record.year}年${record.month} 的对账单明细`);
};

// 下载账单
const handleDownload = (record) => {
  Message.success(`${record.year}年${record.month}对账单下载中...`);
};
</script>

<style lang="scss" scoped>
.bill-page {
  .page-header {
    @apply flex items-center justify-between mb-6;

    h2 {
      @apply text-xl font-medium mb-1;
    }

    .subtitle {
      @apply text-gray-500 text-sm;
    }
  }

  .search-form {
    @apply mb-4;
  }

  .month-info {
    .month {
      @apply font-medium mb-1;
    }

    .year {
      @apply text-sm text-gray-500;
    }
  }

  .amount-info {
    @apply space-y-1;

    .income,
    .expense {
      @apply flex items-center justify-between;

      .label {
        @apply text-gray-500;
      }

      .value {
        @apply font-medium;

        &.income {
          @apply text-success-600;
        }

        &.expense {
          @apply text-danger-600;
        }
      }
    }
  }

  .settlement-amount {
    @apply font-medium text-primary-600;
  }
}
</style>
